<template>
  <div class="all">
    <header>
      <div class="header_left">全部相册</div>
    </header>
    <div class="image_main">
      <div class="demo-image">
        <div class="block" v-for="fit in fits" :key="fit">
          <span class="demonstration">{{ fit }}</span>
          <el-image
            style="width: 100px; height: 100px"
            :src="url"
            :fit="fit"
          ></el-image>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
 export default {
    data() {
      return {
        fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
      }
    }
  }
</script>

<style lang="scss" scoped>
.all {
  width: 100%;
  height: 100%;
  display: flex;
  padding: 0 40px;
  padding-top: 24px;
  flex-direction: column;
  position: relative;
  .header {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
